<template>
  <div id="app">
    <el-header height="34px" style="padding: 0">
      <!-- div中为第一行导航栏-->
      <div style="background-color: #f9f9f9; width: 1200px;margin: 0 auto; position: relative;line-height: 0px;">
        <el-dropdown class="el-d1" style="position: absolute;left: 0px ;font-size: 12px;">
          <el-button type=""
                     style="border: 0px;background-color: #f9f9f9; line-height: 0px;padding: 0px;margin-top: 10px">
            配送至:{{ address }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="add in addressArr">
              <a class="a1" href="javascript:void (0)" @click="addressUpdata(add.name)">{{ add.name }}</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <!--从欢迎光临开始-->
        <div style="position: absolute;right: 10px; margin-top: 10px;line-height: 0px">
          <!--          <el-dropdown-menu slot="dropdown">-->
          <!--          </el-dropdown-menu> <a href="">欢迎光临当当，请登录</a>-->
          <a v-if="logining" class="a1" href="/userlogin">欢迎光临，请登录</a>
          <a v-else class="a1" href="/information/orders">欢迎{{ this.user.nickname }}光临 </a>
          <el-button v-if="!logining" class="a1" @click="leave()"
                     style="line-height:0px;border: none;background-color: rgba(255,255,255,0)"> 【退出登录】
          </el-button>
          <el-divider direction="vertical"></el-divider>
          <a class="a1" href="" style="margin-left: 10px">成为会员</a>
          <el-divider direction="vertical"></el-divider>
          <a class="a1" href="">我的云书房</a>
          <el-divider direction="vertical"></el-divider>

          <el-dropdown>
  <span class="el-dropdown-link" style="color: #646464">
             <el-button  class="a1" @click="FAndT(0)"
                        style="line-height:0px;margin: 0px;padding:0px;font-size:12px;border: none;background-color: rgba(255,255,255,0)">
               我的小驿</el-button>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button  class="a1" @click="FAndT(1)"
                                            style="line-height:0px;margin: 0px;padding:0px;font-size:12px;border: none;background-color: rgba(255,255,255,0)">
                我的订单</el-button>
              </el-dropdown-item>

                <el-dropdown-item><el-button  class="a1" @click="FAndT(2)"
                                              style="line-height:0px;margin: 0px;padding:0px;font-size:12px;border: none;background-color: rgba(255,255,255,0)">
                  购物车</el-button>
                </el-dropdown-item>
              <el-dropdown-item disabled>银铃铛抵现</el-dropdown-item>
              <el-dropdown-item>
                <el-button  class="a1" @click="FAndT(3)"
                            style="line-height:0px;margin: 0px;padding:0px;font-size:12px;border: none;background-color: rgba(255,255,255,0)">
                  我的收藏</el-button>
              </el-dropdown-item>
              <el-dropdown-item disabled>我的余额</el-dropdown-item>
              <el-dropdown-item>
                <el-button  class="a1" @click="FAndT(4)"
                            style="line-height:0px;margin: 0px;padding:0px;font-size:12px;border: none;background-color: rgba(255,255,255,0)">
                  我的评论</el-button></el-dropdown-item>
              <el-dropdown-item disabled>礼券/礼品卡</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
          <el-dropdown>
  <span class="el-dropdown-link" style="color: #646464"><a class="a1" href="">小驿拼团</a>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item disabled>小驿拼团</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
          <a class="a1" href="" disabled>小说投稿</a>
          <el-divider direction="vertical"></el-divider>
          <el-dropdown>
  <span class="el-dropdown-link" style="color: #646464"><a class="a1" href="">企业采购</a>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item disabled>大宗采购</el-dropdown-item>
              <el-dropdown-item disabled>礼品卡采购</el-dropdown-item>
              <el-dropdown-item disabled>礼品卡激活</el-dropdown-item>
              <el-dropdown-item disabled>礼品卡使用</el-dropdown-item>
              <el-dropdown-item disabled>分销/荐购</el-dropdown-item>
              <el-dropdown-item disabled>礼品卡专区</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
          <el-dropdown>
  <span class="el-dropdown-link" style="color: #646464"><a class="a1" href="">客服服务</a>
    <i class="el-icon-arrow-down el-icon--right"></i>
  </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item disabled>帮助中心</el-dropdown-item>
              <el-dropdown-item disabled>自动退换货</el-dropdown-item>
              <el-dropdown-item disabled>自主发票</el-dropdown-item>
              <el-dropdown-item disabled>联系客服</el-dropdown-item>
              <el-dropdown-item disabled>我要投诉</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-divider direction="vertical"></el-divider>
          <a class="a1" href="" disabled>切换无障碍</a>
        </div>
      </div>
      <!--   搜索框,logo,购物车,订单  -->
    </el-header>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
<script>
export default {
  data() {
    return {
      user: null,
      logining: true,
      addressArr: [{name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}],
      address: "北京",
      advertisement: true,//广告显示和关闭
      text: "",//搜索框
      category: [{name: "科技"}, {name: "IT"}, {name: "科技"}, {name: "HH"}, {name: "科技"}, {name: "IT"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "HH"}, {name: "科技"}, {name: "IT"}, {name: "HH"}, {name: "科技"}, {name: "IT"}, {name: "HH"}, {name: "北京"}, {name: "天津"}, {name: "河北"}],
      // bigtype:[],
      type1: "全部分类",
      hotArr: [{name: "小计"}, {name: "小雅"}],
      activeIndex: '2',
      activeIndex2: '3',
      arr: [{name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}],
      brr: [{name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}],
      crr: [{name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}, {name: "北京"}, {name: "天津"}, {name: "河北"}],
      imgUrlArr: [{url: "http://img61.ddimg.cn/upload_img/00822/cxtc/750x315_1011-1665641221.jpg"}, {url: "logo.jpg"}, {url: "logo3.jpg"}, {url: "logo.jpg"},],
      contentArr: [{content: "满100减50"}, {content: "满100减50"}, {content: "满100减50"},],
      productArr: [{id: 1, title: "12123", price: 111, viewCount: 123, saleCount: 4534, url: "logo.jpg"}, {
        id: 1,
        title: "12123",
        price: 111,
        viewCount: 123,
        saleCount: 4534,
        url: "logo.jpg"
      }, {id: 1, title: "12123", price: 111, viewCount: 123, saleCount: 4534, url: "logo.jpg"}, {
        id: 1,
        title: "12123",
        price: 111,
        viewCount: 123,
        saleCount: 4534,
        url: "logo.jpg"
      }, {id: 1, title: "12123", price: 111, viewCount: 123, saleCount: 4534, url: "logo.jpg"}, {
        id: 1,
        title: "12123",
        price: 111,
        viewCount: 123,
        saleCount: 4534,
        url: "logo.jpg"
      }, {id: 1, title: "12123", price: 111, viewCount: 123, saleCount: 4534, url: "logo.jpg"}, {
        id: 1,
        title: "12123",
        price: 111,
        viewCount: 123,
        saleCount: 4534,
        url: "logo.jpg"
      },],
      topArr: [{title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"}, {title: "asd"},]
    };
  },
  methods: {
    addressUpdata(name) {
      this.address = name;
    },
    advertisementUP() {
      this.advertisement = false;
    },
    type2(name) {
      this.type1 = name;
    },
    handleSelect(key, keyPath) {
      alert(key, keyPath);
      location.href = "http://www.baidu.com"
    },
    selectCategory() {
      let url = 'http://localhost:8080/indexs/selectCategory';
      console.log('url = ' + url);
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        this.category = responseBody.data;
      });
    },
    getUserLogin() {
      let url = "http://localhost:8080/indexs/getUserLogin"
      this.axios.get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.data != null) {
          this.user = responseBody.data;
          this.logining = false;
        }
      });
    },
    leave() {
      let url = "http://localhost:8080/indexs/leaveUserLogin"
      this.axios.get(url).then((response) => {
        this.logining = false;
        this.user = null;
        location.href = '/';
      });
    },
    FAndT(id){
      if(this.user==null){
        location.href='/userlogin'
      }else {
        if(id==0) {
          location.href = '/information/myHomePage'
        }else if(id==1){
          location.href = '/information/orders'
        }else if(id==2){
          location.href = '/shoppingCar'
        }else if(id==3){
          location.href ='/information/collection'
        }else if(id==4){
          location.href ='/information/comment'
        }
      }
    }
  },
  mounted() {
    this.getUserLogin();
  }
}
</script>